<template>
  <div>
    <el-drawer
      :visible.sync="useImgdraw"
      direction="rtl"
      title="素材库"
      size="40%"
      class="drawer"
      :close-on-press-escape="false"
    >
      <div class="filter-container" style="align-items: center">

        <el-input
          size="small"
          placeholder="请输入素材名称，支持模糊"
          v-model="sucai.title"
          clearable
          style="width:350px;"
          class="filter-item w-200"
        />
        <el-button-group class="filter-item">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="searchSc(1)"
          >
            搜索
          </el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="newSC"
          >
            新增素材
          </el-button>

        </el-button-group>
        <el-checkbox v-model="sucai.self" style="padding:20px;">只看自己</el-checkbox>
        <div class="scimgBox" style="display: flex;flex-wrap: wrap;min-height: 300px;" v-loading="scimgBox">
          <div class="img" v-for="(item,idx) in sclist.data">
            <el-image
              :src="item.imgPath"
              style="width: 200px;height:300px;"
              fit="cover"
              :preview-src-list="srcList"
            >
            </el-image>
            <div class="action">
              <div class="a-row">
                <el-button type="primary" icon="el-icon-edit" circle size="mini" style="margin-right: 15px" @click="editSC(item.id)"></el-button>
                <el-popconfirm
                  :title="(item.makeUserName!=name?'该素材是'+item.makeUserName+'所有，确认删除？':'确认删除这个素材吗？')"
                  @confirm="delSucai(item.id)"
                >
                  <el-button type="danger" icon="el-icon-delete" size="mini" circle slot="reference"></el-button>
                </el-popconfirm>
              </div>
            </div>
            <div class="imgTips">
              <div class="strong">{{ item.imgText }}</div>
              <div>制作:{{ item.makeUserName }}</div>
              <div>制作时间:{{ item.dateline }}</div>
            </div>
          </div>
        </div>
        <el-pagination
          layout="prev, pager, next"
          background
          v-if="sclist.total>0"
          :page-size="14"
          :page-sizes="[14]"
          @current-change="gopage"
          :total="sclist.total"
        >
        </el-pagination>
      </div>
    </el-drawer>
  </div>
</template>
<style lang="less" scoped>
.filter-container {
  padding: 0 20px;
}

.scimgBox {
  .img {
    border: 1px solid #ddd;
    padding: 5px;
    margin: 10px;
    position: relative;

    .action {
      position: absolute;
      background: rgba(0, 0, 0, .5);
      height: 40px;
      width: 100%;
      top: 0;
      left: 0;
      padding:0 15px;
      .a-row{
        justify-content: right;
        height: 40px;
        display: flex;
        align-items: center;
      }
    }

    &:hover {
      border-color: #409EFF;
      cursor: pointer;
    }
  }

  .insertIMg {
    position: absolute;
    bottom: 80px;
    right: 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    padding: 7px 10px;
    color: #fff;

    &:hover {
      background: rgba(0, 0, 0, 1);
    }
  }

  .imgTips {
    font-size: 12px;
    color: #777;

    & > div {
      margin: 5px 0;

      &.strong {
        font-size: 16px;
        color: #409EFF;
        font-weight: bolder;
      }
    }
  }
}
</style>
<script>
import { mapGetters } from 'vuex'
import { searchSCK,DeleteSucai } from '@/api/count'

export default {
  data() {
    return {
      useImgdraw: false,
      sucai: {
        title: '',
        title2: '',
        self:true
      },
      sclist: '',
      scimgBox:false,
    }
  },
  computed: {
    ...mapGetters([
      'name',
    ]),
  },
  watch: {
    'sucai.self': function(val) {
      this.searchSc(1)
    },
  },
  created() {
    this.searchSc(1)
  },
  methods: {
    editSC(id){
      this.$router.push({ path: '/report/monthcalendardiy', query: { id: id } })
      // window.location.href='#/report/monthcalendardiy?id='+id
    },
    delSucai(id){
      DeleteSucai({id:id}).then(r => {
        this.searchSc(1,0)
      })
    },
    openSc() {
      this.useImgdraw = true
    },
    gopage(page){
      this.searchSc(page)
    },
    newSC() {
      window.open('https://wz.mala.cn/admincp/#/report/monthcalendardiy')
    },
    searchSc(page,type) {
      this.scimgBox = true
      if (type == 2) {
        this.checkBannerBoxLoading = true
        searchSCK({ type: 1, title: this.sucai.title2 }).then(r => {
          this.checkBannerBoxLoading = false
          if (r.code == 200) {
            this.Bannerlist = r.data
          }
        })
      } else {
        searchSCK({page:page,...this.sucai}).then(r => {
          this.scimgBox = false
          if (r.code == 200) {
            this.sclist = r.data
            let srcList = []
            for (let i = 0; i < r.data.data.length; i++) {
              srcList.push(r.data.data[i].imgPath)
            }
            this.srcList = srcList
          }
        })
      }
    }
  }
}
</script>
